<template>
  <div class="app-container">
    <el-row class="message-menu">
      <el-col :span="4">
        <el-menu
          :default-active="type"
          class="el-menu-vertical-demo"
          text-color="#606266"
          active-text-color="#409EFF"
          @select="handleSelect">
          <el-menu-item index="announce">
            <span slot="title">公告</span>
            <el-badge v-if="notification.announce" :value="notification.announce"/>
          </el-menu-item>
          <el-menu-item index="remind">
            <span slot="title">通知</span>
            <el-badge v-if="notification.remind" :value="notification.remind"/>
          </el-menu-item>
          <!--<el-menu-item index="message">-->
          <!--<span slot="title">私信</span>-->
          <!--<el-badge v-if="notification.message" :value="notification.message"/>-->
          <!--</el-menu-item>-->
        </el-menu>
      </el-col>
      <el-col :span="20" class="message-container">
        <el-button type="text" class="markall-btn" @click="handleMarkAll">全部标记已读</el-button>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="未读" name="unread">
            <message-list :data="list" :list-loading="listLoading" :empty-msg="emptyMsg" :is-dot="false" :show-icon="true" @read-message="handleMark"/>
            <div style="text-align: center"><el-button v-if="loadMore" type="text" @click="handleLoadMore">加载更多</el-button></div>
          </el-tab-pane>
          <el-tab-pane label="已读" name="readed">
            <message-list :data="list" :list-loading="listLoading" :is-dot="false" :show-icon="true" empty-msg="没有相关消息" @read-message="handleMark"/>
            <div style="text-align: center"><el-button v-if="loadMore" type="text" @click="handleLoadMore">加载更多</el-button></div>
          </el-tab-pane>
          <el-tab-pane label="所有" name="all">
            <message-list :data="list" :list-loading="listLoading" :is-dot="false" :show-icon="true" empty-msg="没有相关消息" @read-message="handleMark"/>
            <div style="text-align: center"><el-button v-if="loadMore" type="text" @click="handleLoadMore">加载更多</el-button></div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <back-to-top :custom-style="myBackToTopStyle" :visibility-height="200" :back-position="0" transition-name="fade"/>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import MessageList from '@/components//MessageList'
import BackToTop from '@/components/BackToTop'
import { getNotification, markAll, markReaded } from '@/api/notification'
export default {
  name: 'Info',
  components: {
    MessageList,
    BackToTop
  },
  data() {
    return {
      type: this.$route.params['type'] ? this.$route.params['type'] : 'announce',
      listQuery: {
        currentPage: 1,
        pageSize: 25,
        notiType: 1, // 1-announce, 2-remind, 3-message
        isRead: 0 // 0-unread, 1-readed
      },
      activeName: 'unread',
      emptyMsg: '沒有新公告',
      loadMore: false,
      list: [],
      listLoading: true,
      stateMap: {
        'unread': 0,
        'readed': 1,
        'all': null
      },
      notiTypeMap: {
        'announce': 1,
        'remind': 2,
        'message': 3
      },
      emptyMsgMap: {
        'announce': '沒有新公告',
        'remind': '沒有新通知',
        'message': '沒有新私信'
      },
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px',
        background: '#e7eaf1'
      }
    }
  },
  computed: {
    ...mapGetters([
      'notification'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.$store.dispatch('GetNotification').then()
      this.listQuery.isRead = this.stateMap[this.activeName]
      this.listQuery.notiType = this.notiTypeMap[this.type]
      getNotification(this.listQuery).then(response => {
        if (response.data) {
          if (this.listQuery.currentPage === 1) {
            this.list = response.data
          } else {
            this.list = this.list.concat(response.data)
          }
          if (this.listQuery.currentPage < response.pageCount) {
            this.loadMore = true
          } else {
            this.loadMore = false
          }
        }
      }).finally(() => {
        this.listLoading = false
      })
    },
    refreshData() {
      this.$store.dispatch('GetNotification').then()
      const refreshQuery = {}
      refreshQuery.isRead = this.stateMap[this.activeName]
      refreshQuery.notiType = this.notiTypeMap[this.type]
      refreshQuery.pageSize = this.listQuery.currentPage * this.listQuery.pageSize
      refreshQuery.currentPage = 1
      getNotification(refreshQuery).then(response => {
        if (response.data) {
          this.list = response.data
        }
        if (response.pageCount > 1) {
          this.loadMore = true
        } else {
          this.loadMore = false
        }
      }).finally(() => {
        this.listLoading = false
      })
    },
    handleSelect(index) {
      this.type = index
      this.emptyMsg = this.emptyMsgMap[index]
      this.listQuery.currentPage = 1
      this.fetchData()
    },
    handleTabClick() {
      this.listQuery.currentPage = 1
      this.fetchData()
    },
    handleLoadMore() {
      this.listQuery.currentPage++
      this.fetchData()
    },
    handleMark(row) {
      markReaded([{ 'id': row.id, 'isRead': 1 }]).then(() => {
        this.refreshData()
      })
    },
    handleMarkAll() {
      markAll([{ 'notiType': this.notiTypeMap[this.type], 'isRead': 1 }]).then(() => {
        this.refreshData()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  .message-menu {
    .el-menu {
      border: solid 1px #e6e6e6;
      border-radius: 4px
    }
    .el-menu-item.is-active {
      background-color: #ecf5ff;
    }
    .el-badge {
      position: absolute;
      right: 10px;
      padding-top: 5px
    }
    .el-badge__content.is-dot {
      width: 10px;
      height: 10px
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .message-container {
    padding: 0 30px;
    .markall-btn {
      position: absolute;
      right: 30px;
      z-index: 99;
    }
  }
</style>
